<template>
    <component
        :key="data._id"
        :is="data.tag"
        v-bind="{
            ...data.attributes,
            ...vModel(data.attributes),
        }"
    >
        <template v-for="slot in data.slot" :key="slot._id" #[slot.name]>
            <ml-render
                v-for="child in slot.children"
                :key="child._id"
                :item="child"
                :golbal="golbal"
                :list="slot.children"
                @copy="$emit('copy', $event)"
                @deleteItem="$emit('deleteItem', $event)"
            />
        </template>

        <template v-if="Array.isArray(data.children)">
            <ml-render
                v-for="child in data.children"
                :key="child._id"
                :item="child"
                :golbal="golbal"
                :list="data.children"
                @copy="$emit('copy', $event)"
                @deleteItem="$emit('deleteItem', $event)"
            />
        </template>
        <template v-else>
            {{ item.content }}
        </template>
    </component>
</template>
<script lang="ts">
import { defineComponent, ref, PropType } from "vue";
import {
    DeleteOutlined,
    ScissorOutlined,
    SnippetsOutlined,
} from "@ant-design/icons-vue";
import { handleMethodsV1, rewriteHookV1, splitKey } from "../hook/comon";
import commonHook from "../hook/main";

export default defineComponent({
    name: "ml-render",
    components: {
        DeleteOutlined,
        ScissorOutlined,
        SnippetsOutlined,
    },
    props: {
        item: Object,
        golbal: Object as PropType<any>,
        list: Array,
    },
    setup(props, ctx) {
        const data = ref<any>(
            rewriteHookV1(handleMethodsV1(props.item, props), ctx)
        );

        const vModel = (attrs: any) => {
            if (!attrs) {
                return null;
            }

            let strs = Object.keys(attrs).filter((k) => k.includes("model:"));

            if (!strs.length) {
                return null;
            }

            let new_obj: any = {};
            strs.forEach((key: string) => {
                let splitStr: any[] = key.split(":");

                let obj: any;
                let str: any;
                let arr = splitKey(attrs[key as any]);

                if (arr.length > 1) {
                    arr.forEach((k, index) => {
                        if (arr.length - 1 != index) {
                            if (!props.golbal[k]) {
                                props.golbal[k] = {};
                            }
                            obj = props.golbal[k];
                        }
                        str = k;
                    });
                } else {
                    str = arr[0];
                    obj = props.golbal;
                }

                if (
                    attrs[splitStr[1]] !== undefined &&
                    obj[splitStr[1]] === undefined
                ) {
                    obj[splitStr[1]] = attrs[splitStr[1]];
                }

                new_obj[splitStr[1]] = obj[str];
                new_obj[`onUpdate:${splitStr[1]}`] = (val?: any) =>
                    (obj[str] = val);
            });

            return new_obj;
        };

        if (props.item) {
            if (
                ["a-modal", "a-drawer"].includes(props.item.tag) &&
                props.item.attributes["getContainer"] === "#LayoutContent"
            ) {
                delete props.item.attributes["getContainer"];
                delete props.item.attributes["style"];
            }
        }

        return { data, vModel };
    },
});
</script>
